<template>
    <div class="component-pkg-free-select">
        <div class="pkg-select-box">
            <div class="item white-bg default-box-shadow" v-for="(item, index) in value" :key="index">
                <div class="cover-box">
                    <img class="cover" :src="item.cover" mode="aspectFill" />
                    <!-- <div class="discount-label white-color tiny-text">
                        {{(item.discount / 10) + '折优惠'}}
                    </div> -->
                </div>
                <div class="info-box">
                    <div class="top">
                        <div class="title normal-text hidden-text-v3">{{item.value}}</div>
                        <!-- <div class="outer-checkbox">
                            <div class="holder small-text white-color text-center">{{item.is_default ? '当前套餐默认产品' : ''}}</div>
                        </div> -->
                    </div>
                    <div class="bottom" @click.stop>
                        <div class="price color-blue">
                            免费赠送
                        </div>
                        <Stepper color="blue" :value="item.number" :val-index="index" @change="onNumberChange" :can-change="true" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
// import {
//     api,
// } from '@/lib/api';
import Stepper from '@/features/pkg/stepper.vue';
import {
    mapState,
} from 'vuex';
import store from '@/store';

export default {
    name: 'PackageSelect',
    components: {
        Stepper,
    },
    props: {
        value: {
            type: Array,
            required: true,
        },
        pkgId: {
            type: Number,
            required: true,
        },
        orderId: {
            type: Number,
            required: true,
        },
        specIndex: {
            type: Number,
            required: true,
        },
        // options: {
        //     type: Array,
        //     required: true,
        // },
    },
    computed: {
        ...mapState('manage', {
            selectedGoodsSpecMap: state => state.selectedGoodsSpecMap,
        }),
        key() {
            return `${this.pkgId}_${this.orderId}`;
        },
        selectedGoodsSpec() {
            return this.selectedGoodsSpecMap[this.key] ? this.selectedGoodsSpecMap[this.key] : [];
        },
        value() {
            return this.selectedGoodsSpec[this.specIndex];
        },
    },
    methods: {
        onNumberChange(option) {
            const type = option.type;
            const valIndex = option.index;
            const number = option.number;
            store.commit('manage/setSelectedGoodsSpecItemNumber', {
                key: this.key,
                specIndex: this.specIndex,
                valIndex: valIndex,
                number: type === 'del' ? number - 1 : number + 1,
            });
        },
        // toSpecDetail(index) {
        //     api.navigateTo({
        //         url: '/pages/spec_detail/main',
        //         query: {
        //             pkg_id: '' + this.id,
        //             spec_index: '' + this.specIndex,
        //             val_index: '' + index,
        //         },
        //         // query: {
        //         //     detail: JSON.stringify(option),
        //         // },
        //     });
        // },
    },
    onLoad() {
        // console.log(this.key, this.selectedGoodsSpecMap, this.selectedGoodsSpecMap[this.key], this.selectedGoodsSpec);
    },
};
</script>
<style lang="less">
@import "../../lib/style/mixins.less";
.component-pkg-free-select {
    .pkg-select-box {
        white-space: nowrap;
        overflow-x: scroll;
        .item {
            display: flex;
            padding: 16px 12px;
            margin-bottom: 10px;
            border-radius: 14rpx;
            .cover-box {
                position: relative;
                width: 170px;
                height: 120px;
                .cover {
                    width: 100%;
                    height: 100%;
                }
                .discount-label {
                    position: absolute;
                    top: 10px;
                    left: -4rpx;
                    padding: 2rpx 8rpx;
                    border-radius: 0 12rpx 12rpx 0;
                    background-color: #fd6270;
                }
            }
            .info-box {
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                width: 168px;
                position: relative;
                padding: 0rpx 12rpx;
                .top {
                    width: 100%;
                    .title {
                        width: 100%;
                        height: 60px;
                        white-space: normal;
                        word-wrap: break-word;
                        word-break: break-all;
                        // overflow: hidden;
                    }
                }
                .bottom {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .price {
                        font-size: 14px;
                    }
                }
                .outer-checkbox {
                    margin-top: 10rpx;
                    .icon {
                        margin-left: 4rpx;
                        font-size: 30rpx;
                    }
                    .holder {
                        display: inline-block;
                        padding: 0 10rpx;
                        background-color: #F4051A;
                    }
                }
            }
        }
    }
}
</style>
